<template>
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
        <ArticleItem v-for="item in list" :key="item.art_id" :artObj="item" :closeShow="false"></ArticleItem>
    </van-list>
  </div>

</template>

<script>
import { searchResultAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem'
export default {
  name: 'SearchResult',
  components: { ArticleItem },
  data () {
    return {
      list: [], // 搜索结果列表
      loading: false, // 控制底部加载中的状态
      finished: false, // 是否全部 加载完成
      page: 1 // 请求第几页数据
    }
  },
  async created () {
    // this.getList() // onLoad事件 中的调用getList()事件和这个实现的功能一样
  },
  methods: {
    async getList () { // 获取搜索结果数据
      // 提取，url路径中关键字
      // console.log(this.$route.params.kw)
      const [, res] = await searchResultAPI({
        q: this.$route.params.kw, // .kw 对应router/index.js里配置的path路径
        page: this.page
      })
      if (res.data?.data?.results?.length === 0) {
        this.finished = true // 全部加载完毕，无更多数据了，<van-list>也不会再触发onLoad事件了
        return
      }
      // console.log(res)
      this.list = [...this.list, ...res.data.data.results]
      this.loading = false // 底部加载中关闭，自动监测到底，再次触发onLoad(造成递归)
    },
    // 问题：onLoad在当前组件页面第一次显示时，会马上执行一次
    // 原因：list内没有数据，撑不开list, list没有高度，底部现在就出现在屏幕上，loading值还是false，所以list内部判定 列表到底了，触发一次onLoad方法
    onLoad () { // 加载更多方法
      // console.log(1)
      this.getList()
      this.page++
    }
  }
}
</script>

<style scoped lang="less">
.search-result-container {
  padding-top: 46px;
}
</style>
